import React, { useEffect, useState } from 'react'
import './Commontsitem.less'
import tou from '../../../assets/images/头像.png'
import friends from '../../../assets/images/friends.png'
import * as actionTypes from '../../../pages/Info/store/actionCreators';
import { connect } from "react-redux";
import { useHistory } from 'react-router-dom';

const Commontssitem = (props) => {
    let history = useHistory()
    console.log(props, '88888888888888888888');
    const { commontsindex, commonts, getChangeDispatch, getCommontsDispatch } = props
    // console.log(commentsindex, 'commentsindex');
    console.log(commonts, 'commonts');
    const [isonclick, setIsonclick] = useState(false)
    const [andone, setAndone] = useState(false)
    console.log(commonts.length,'commonts.length');
    console.log(commontsindex,'commontsindex');

    // console.log(commonts[0].list1, 'commonts.array[0]');
    // console.log(commonts[1], 'commonts.array[1]');
    useEffect(() => {
        // getCommontsDispatch()
        // getChangeDispatch()  

    }, [])
    // console.log(commonts.array[1],'commonts[1]');
    // // const m
    // useEffect(()=>{

    // },[goodindex])



    const addone = ((id) => {
        let index = commonts[commontsindex].list1.findIndex(item => item.id == id)
        commonts[commontsindex].list1[index].goodnumber = commonts[commontsindex].list1[index].goodnumber + 1
        // newnumber+
        console.log(commonts, '+++++');
        // console.log(newnumber,'newnumber');
        console.log(commontsindex,index,'000000000000000');
        
        getChangeDispatch(commonts)
        setIsonclick(!isonclick)
        setAndone(true)
        // }


    })

    useEffect(() => {
        isonclick
    }, [isonclick])

    return (
        <>
            <div>
                {
                    commonts.length ? (
                        commonts[commontsindex]?.list1.map((item, index) => {
                            return (
                                <div className='commonts-all' key={item.id}>

                                    <div className="commonts-header">

                                        <div className="header-info">
                                            <div className="info-img">
                                                <img src={tou} alt="" />
                                            </div>
                                            <div className="info-all">
                                                <div className='info-username'>{item.writer}</div>
                                                <div className="info-time">{item.time}</div>
                                            </div>
                                        </div>
                                    </div>


                                    <div className="commonts-main" onClick={() => history.push(`/detail/${item.id}`)}>
                                        <div className="commonts-main-text">
                                            {item.text}
                                        </div>
                                        <div className="main-img">
                                            <div className="img-big">
                                                <img src={item.imgsrc1} alt="" />
                                            </div>
                                            <div className="img-small">
                                                <div className="img1">
                                                    <img src={item.imgsrc2} alt="" />
                                                </div>
                                                <div className='log'> </div>
                                                <div className="img1">
                                                    <img src={item.imgsrc3} alt="" />
                                                </div>
                                            </div>
                                        </div>
                                        <div className="main-video">

                                        </div>

                                    </div>


                                    <div className="commonts-footer">
                                        <div className="footer-friends">
                                            <img src={friends} alt="" />
                                        </div>
                                        <div className="interaction">
                                            <div className="interaction">
                                                <div className="one-img">
                                                    <svg t="1642225315224" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9076" width="200" height="200"><path d="M423.633455 70.772364a48.989091 48.989091 0 1 1 19.269818 96.093091C270.522182 201.425455 144.523636 353.373091 144.523636 531.153455c0 205.218909 166.539636 371.595636 372.037819 371.595636 176.546909 0 327.749818-123.764364 363.938909-293.981091a48.989091 48.989091 0 1 1 95.860363 20.363636C930.606545 844.404364 739.607273 1000.727273 516.584727 1000.727273 257.000727 1000.727273 46.545455 790.504727 46.545455 531.153455 46.545455 306.432 205.730909 114.501818 423.633455 70.772364z m455.819636-0.930909A97.978182 97.978182 0 0 1 977.454545 167.796364V437.294545a48.989091 48.989091 0 1 1-97.978181 0V224.814545L487.377455 629.178182a48.989091 48.989091 0 0 1-66.304 3.746909l-2.97891-2.676364a48.989091 48.989091 0 0 1-1.070545-69.282909L798.254545 167.796364h-188.276363a48.989091 48.989091 0 0 1-48.872727-45.474909l-0.116364-3.49091c0-27.066182 21.946182-49.012364 48.989091-49.012363z" p-id="9077"></path></svg>
                                                </div>
                                                <div className="one-text1">
                                                    分享
                                                </div>
                                            </div>
                                            <div className="interaction">
                                                <div className="one-img">
                                                    <svg t="1642225897378" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10134" width="200" height="200"><path d="M512.6 992c-18 0-36.2-1-54.5-3C254.8 966.9 61.4 776.9 35.9 574.2c-18.8-149.5 31-295.9 136.7-401.6C278.2 66.9 424.7 17 574.2 35.9 776.6 61.4 966.5 254.5 989 457.5c12.1 109.5-11.8 215.6-69.1 307.7 12.1 44.1 46 161 46 161 3.2 11.2 0.1 23.3-8.1 31.5s-20.3 11.4-31.5 8.1c0 0-117.2-33.9-160.5-46.3-76.7 47.9-163.2 72.5-253.2 72.5z m-0.3-896c-110.5 0-215.6 43-294.5 121.8C126.2 309.4 83 436.4 99.4 566.2 121.1 738.7 292 906.6 465.1 925.4c97.8 10.7 192.3-11.7 273.5-64.5 10.6-6.9 23.9-8.8 36.4-5.3 19.3 5.5 71.9 20.7 113.3 32.7-12-41.7-27.2-94.9-32.6-115-3.2-12.1-1.1-25 5.8-35.5 52.5-81 74.6-175.5 63.8-273.2-19-172.9-186.9-343.5-359.1-365.2-18-2.3-36.1-3.4-53.9-3.4z m261.2 818.5z m141.7-142.1c0 0.1-0.1 0.1-0.1 0.2 0.1 0 0.1-0.1 0.1-0.2z" fill="#2c2c2c" p-id="10135"></path><path d="M336 544c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.6 48-48 48zM528 544c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.6 48-48 48zM720 544c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.6 48-48 48z" fill="#2c2c2c" p-id="10136"></path></svg>                            </div>
                                                <div className="one-text">
                                                    {item.commentsnumber}
                                                </div>
                                            </div>
                                            <div className="interaction-good" onClick={() => addone(item.id)} >
                                                <div className="one-img">
                                                    <svg t="1642225346688" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9222" width="200" height="200"><path d="M411.904 153.728c19.797333-63.232 54.186667-90.24 122.026667-70.656l1.706666 0.554667c19.84 6.101333 42.666667 17.706667 64.085334 37.162666 33.706667 30.72 53.76 73.301333 53.76 126.805334 0 47.786667-2.773333 77.312-10.88 110.805333l-0.256 0.938667h175.488c107.264 0 149.888 72.362667 122.922666 192.682666l-2.304 9.856-5.461333 18.005334-20.608 67.114666-9.642667 30.677334-9.173333 28.672-17.066667 51.626666-11.648 33.621334-7.210666 20.053333-9.984 26.368-6.101334 15.232c-29.525333 71.253333-90.453333 103.978667-170.112 94.592l-387.114666-28.8a587.690667 587.690667 0 0 0-7.381334-0.341333l-15.36-0.341334H218.026667l-12.501334-0.213333-9.984-0.426667-8.32-0.768-3.712-0.554666-7.125333-1.408-11.52-3.029334c-59.349333-17.621333-90.24-67.925333-90.24-139.605333v-283.52c0-90.538667 54.954667-142.208 148.565333-142.208l75.776-0.042667 5.205334-3.968a293.632 293.632 0 0 0 72.234666-88.32l6.101334-11.946666c6.101333-12.544 11.093333-25.685333 15.829333-41.002667l0.768-2.602667z m88.661333 8.064c-1.834667-0.426667-2.645333 0.170667-3.541333 2.773333l-3.882667 14.933334-10.666666 38.442666-2.56 8.533334a366.933333 366.933333 0 0 1-20.565334 53.162666 387.754667 387.754667 0 0 1-72.618666 102.442667 333.141333 333.141333 0 0 1-49.28 42.026667l5.504-3.925334v417.408l336.682666 25.344c41.898667 4.906667 65.621333-6.101333 80.213334-36.096l2.858666-6.229333 5.76-14.378667 9.514667-25.173333 6.912-19.285333 11.221333-32.469334 8.064-24.064 17.365334-53.76 19.2-61.354666 15.445333-50.858667c18.986667-76.074667 7.808-94.592-38.357333-94.592h-217.685334a53.632 53.632 0 0 1-50.730666-71.125333l2.176-6.4 3.328-10.922667c10.282667-35.754667 13.226667-59.136 13.226666-108.629333 0-48.426667-26.88-72.96-57.045333-82.261334l-3.712-1.152z m-242.944 270.122667h-34.389333c-47.616 0-63.232 14.72-63.232 56.917333v283.52c0 38.016 9.941333 53.333333 33.792 59.008l1.493333 0.341333 3.754667 0.554667 5.12 0.426667 11.562667 0.256h28.586666l13.312 0.085333v-401.066667z" p-id="9223"></path></svg>
                                                </div>
                                                <div className="one-text">
                                                    <div>{item.goodnumber}</div>

                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <hr />

                                </div>
                            )
                        }
                        )

                    )
                        : (<div>1</div>)
                }
            </div>

        </>
    )
}

const mapStateToProps = (state) => {
    // console.log(state.info.commontslist, '////');
    return {
        commontslist: state.info.commontslist,
        commonts: state.info.commontslist
    }
}


const mapStateToDispatch = (dispatch) => {
    return {
        getCommontsDispatch() {
            // console.log(actionTypes,'actionTypes');
            dispatch(actionTypes.getCommontslist())
        },
        getChangeDispatch(commonts) {
            dispatch(actionTypes.changeGoodnumberData2(commonts))

        },
    }
}


export default connect(mapStateToProps, mapStateToDispatch)(Commontssitem)